<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <link rel="stylesheet" href="/public/lib/element-ui/index.css">
    <script src="/public/lib/vue.js"></script>
    <script src="/public/lib/element-ui/index.js"></script>
    <script src="/public/lib/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .profile-container {
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .profile-card {
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        .profile-header {
            border-bottom: 1px solid #ebeef5;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .profile-header h3 {
            margin: 0;
            color: #303133;
        }
        .profile-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        .info-item {
            margin-bottom: 20px;
        }
        .info-label {
            font-weight: bold;
            color: #606266;
            margin-bottom: 8px;
        }
        .info-value {
            color: #303133;
            padding: 8px 0;
            border-bottom: 1px solid #ebeef5;
        }
        .loading-container {
            text-align: center;
            padding: 50px 0;
        }
        .no-data {
            text-align: center;
            padding: 50px 0;
            color: #909399;
        }
        .role-badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-left: 10px;
        }
        .badge-admin {
            background-color: #f56c6c;
            color: white;
        }
        .badge-teacher {
            background-color: #409eff;
            color: white;
        }
        .badge-student {
            background-color: #67c23a;
            color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="profile-container">
        <div class="profile-card">
            <div class="profile-header">
                <h3>个人信息</h3>
                <p style="color: #909399; margin-top: 10px;">以下为您的个人信息，如有错误请联系管理员修改</p>
            </div>

            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
                <i class="el-icon-loading" style="font-size: 24px;"></i>
                <p>正在加载个人信息...</p>
            </div>

            <!-- 管理员和教师信息 -->
            <div v-else-if="user.role_id !== 2" class="profile-info">
                <div>
                    <div class="info-item">
                        <div class="info-label">工号</div>
                        <div class="info-value">{{ user.username }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">姓名</div>
                        <div class="info-value">{{ user.name }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">角色</div>
                        <div class="info-value">
                            {{ getRoleName(user.role_id) }}
                            <span :class="['role-badge', getRoleBadgeClass(user.role_id)]">
                                    {{ getRoleName(user.role_id) }}
                                </span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="info-item">
                        <div class="info-label">账号创建时间</div>
                        <div class="info-value">{{ formatDate(user.create_time) }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">最后登录时间</div>
                        <div class="info-value">{{ formatDate(user.update_time) }}</div>
                    </div>
                </div>
            </div>

            <!-- 学生信息展示 -->
            <div v-else-if="studentInfo" class="profile-info">
                <div>
                    <div class="info-item">
                        <div class="info-label">学号</div>
                        <div class="info-value">{{ studentInfo.student_id }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">姓名</div>
                        <div class="info-value">{{ studentInfo.name }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">性别</div>
                        <div class="info-value">{{ studentInfo.gender }}</div>
                    </div>
                </div>
                <div>
                    <div class="info-item">
                        <div class="info-label">班级</div>
                        <div class="info-value">{{ studentInfo.class_name }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">专业</div>
                        <div class="info-value">{{ studentInfo.major }}</div>
                    </div>
                    <div class="info-item">
                        <div class="info-label">信息更新时间</div>
                        <div class="info-value">{{ formatDate(studentInfo.update_time) }}</div>
                    </div>
                </div>
            </div>

            <!-- 无数据状态 -->
            <div v-else class="no-data">
                <i class="el-icon-warning-outline" style="font-size: 48px; margin-bottom: 20px;"></i>
                <p>未找到您的个人信息</p>
                <p style="font-size: 14px;">请确认您使用的是正确的学号登录，或联系管理员添加您的信息</p>
            </div>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: true,
                user: {},
                studentInfo: null
            };
        },
        mounted() {
            this.getUserInfo();
        },
        methods: {
            getUserInfo() {
                axios.get('/api/user')
                    .then(response => {
                        if (response.data.success) {
                            this.user = response.data.user;

                            // 如果是学生，获取学生详细信息
                            if (this.user.role_id === 2) {
                                this.getStudentInfo();
                            } else {
                                this.loading = false;
                            }
                        } else {
                            this.$message.error(response.data.message);
                            this.loading = false;
                        }
                    })
                    .catch(error => {
                        this.loading = false;
                        console.error('获取用户信息错误:', error);
                        this.$message.error('获取个人信息失败');
                    });
            },
            getStudentInfo() {
                axios.get('/api/student/profile')
                    .then(response => {
                        this.loading = false;
                        if (response.data.success) {
                            this.studentInfo = response.data.student;
                        } else {
                            this.$message.error(response.data.message);
                        }
                    })
                    .catch(error => {
                        this.loading = false;
                        console.error('获取学生信息错误:', error);
                    });
            },
            getRoleName(roleId) {
                if (roleId === 3) {
                    return '管理员';
                } else if (roleId === 1) {
                    return '教师';
                } else {
                    return '学生';
                }
            },
            getRoleBadgeClass(roleId) {
                if (roleId === 3) {
                    return 'badge-admin';
                } else if (roleId === 1) {
                    return 'badge-teacher';
                } else {
                    return 'badge-student';
                }
            },
            formatDate(dateString) {
                if (!dateString) return '';
                const date = new Date(dateString);
                return date.toLocaleString('zh-CN');
            }
        }
    });
</script>
</body>
</html>